<template>
    <van-tabbar v-model="active">
        <van-tabbar-item icon="home" url="/#/home">首页</van-tabbar-item>
        <van-tabbar-item icon="idcard" url="/#/classification" dot>分类</van-tabbar-item>
        <template v-if="bus.state.cartGoodsNum>0">
            <van-tabbar-item icon="cart" url="/#/carts" :info="bus.state.cartGoodsNum">购物车</van-tabbar-item>
        </template>
        <template v-else>
            <van-tabbar-item icon="cart" url="/#/carts" >购物车</van-tabbar-item>
        </template>
        <van-tabbar-item icon="contact" url="/#/user">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script>
  import bus from '../bus'

  export default {
    data() {
      return {
        active: 0,
        bus
      }
    }
  }
</script>

<style lang="less" scoped>
    .van-tabbar-item--active {
        color: #f44;
    }
</style>